<template>
	<view>
		<view class="title">{{info.cate_name}}</view>
		<view :style="[$func.bg('ketingchangjing.png')]" class="bg"></view>
		<view class="area01" @click="setPoint"></view>
		<view class="area02" :style="[getStyle]" ref="rectangle"></view>
		<view class="people flex-c" :class="[fall?'fall':'']" :style="{
			left:people.x+'px',
			top:people.y+'px',
		}">
			<view :class="[direction=='right'?'right':'']">
				<u-image src="/static/images/fall.png" mode="aspectFit" width="148rpx" height="210rpx" v-if="fall"
					class=""></u-image>
				<u-image src="/static/images/walk.png" mode="aspectFit" width="148rpx" height="210rpx" v-else></u-image>
			</view>

		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow=false">
			<view class="tips">
				<view class="icon flex-c"><u-icon name="warning-fill" color="#E6901F" size="140rpx"></u-icon></view>
				<view class="tips_title">温馨提示</view>
				<view class="tips_content">{{info.remind}}</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	const screenWidth = uni.getSystemInfoSync().screenWidth
	const pxToRpx = (px) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (750 * Number.parseInt(px)) / screenWidth
	}
	const rpxToPx = (rpx) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (screenWidth * Number.parseInt(rpx)) / 750
	}

	export default {
		props: {
			info: {
				type: Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				tipShow: false,
				fall: false,
				timer: null,
				people: {
					x: rpxToPx(370),
					y: rpxToPx(1100),
				},
				isWalking: false,
				irregularShape: [
					{ x: 220, y: 50 },
					{ x: 450, y: 200 },
					{ x: 500, y: 190 },
					{ x: 520, y: 240 },
					{ x: 520, y: 300 },
					{ x: 420, y: 360 },
					{ x: 370, y: 330 },
					{ x: 270, y: 400 },
					{ x: 50, y: 280 },
					{ x: 50, y: 180 },
				],
				direction: 'left',
			}
		},
		onLoad() {
			let _self = this;
		},
		computed: {
			getStyle() {
				var polygon = []
				for (let vo of this.irregularShape) {
					polygon.push(vo.x + "rpx " + vo.y + 'rpx')
				}
				return {
					clipPath: 'polygon(' + polygon.join(',') + ')'
				}
			},
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			isLineIntersectingRect(x1, y1, x2, y2, rectX, rectY, rectWidth, rectHeight) {
				// Check if the line is outside the rectangle
				if (x1 > rectX + rectWidth || x2 < rectX || y1 > rectY + rectHeight || y2 < rectY) {
					return false;
				}

				// Check if the line intersects the left, right, top, or bottom side of the rectangle
				return (
					(x1 < rectX && x2 > rectX) || // Intersects left side
					(x1 < rectX + rectWidth && x2 > rectX + rectWidth) || // Intersects right side
					(y1 < rectY && y2 > rectY) || // Intersects top side
					(y1 < rectY + rectHeight && y2 > rectY + rectHeight) // Intersects bottom side
				);
			},
			setPoint(e) {
				this.fall = false
				this.setCanvas(this.people, e.detail)
			},
			isLineIntersectingPath(x1, y1, x2, y2, pathPoints) {
				// 构建路径对象
				const path = new Path2D();
				path.moveTo(pathPoints[0], pathPoints[1]);
				for (let i = 2; i < pathPoints.length; i += 2) {
					path.lineTo(pathPoints[i], pathPoints[i + 1]);
				}
				path.closePath();
				console.log(wx.createCanvasContext('myCanvas', this))

				// 检查线段是否与路径相交
				return wx.createCanvasContext('myCanvas', this).isPointInPath(path, x1, y1) !== wx
					.createCanvasContext('myCanvas', this).isPointInPath(path, x2, y2);
			},

			setCanvas(lineStartStr, lineEndStr) {
				// 计算两条线段的交点
				const getLineIntersection = (l1p1, l1p2, l2p1, l2p2) => {
					const denominator = ((l2p2.y - l2p1.y) * (l1p2.x - l1p1.x)) - ((l2p2.x - l2p1.x) * (l1p2.y -
						l1p1
						.y));

					if (denominator === 0) {
						// 线段平行，没有交点
						return null;
					}

					const ua = (((l2p2.x - l2p1.x) * (l1p1.y - l2p1.y)) - ((l2p2.y - l2p1.y) * (l1p1.x - l2p1
							.x))) /
						denominator;
					const ub = (((l1p2.x - l1p1.x) * (l1p1.y - l2p1.y)) - ((l1p2.y - l1p1.y) * (l1p1.x - l2p1
							.x))) /
						denominator;

					if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
						const x = l1p1.x + (ua * (l1p2.x - l1p1.x));
						const y = l1p1.y + (ua * (l1p2.y - l1p1.y));
						return { x, y };
					}

					// 线段不相交
					return null;
				}


				const calculateDistance = (x1, y1, x2, y2) => {
					const deltaX = x2 - x1;
					const deltaY = y2 - y1;
					const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
					return distance;
				}
				// 寻找不规则区域与线的交点的函数
				const findIntersection = (shape, lineStart, lineEnd) => {
					var points = []

					for (let i = 0; i < shape.length; i++) {
						const p1 = shape[i];
						const p2 = i === shape.length - 1 ? shape[0] : shape[i + 1];

						const intersection = getLineIntersection(lineStart, lineEnd, p1, p2);
						if (intersection) {
							intersection.distance = calculateDistance(lineStart.x, lineStart.y, intersection.x,
								intersection.y)
							points.push(intersection)
						}

					}
					return points;
				}
				// 定义不规则区域的顶点坐标
				var irregularShape = [...this.irregularShape]

				// 定义线的两个端点坐标
				var lineStart = {
					x: pxToRpx(lineStartStr.x),
					y: pxToRpx(lineStartStr.y) - 530
				};
				var lineEnd = {
					x: pxToRpx(lineEndStr.x),
					y: pxToRpx(lineEndStr.y) - 530
				};




				var y
				if (lineStart.y > lineEnd.y && lineStart.x < lineEnd.x) {
					console.log('tr')
					// irregularShape = [...this.irregularShape].reverse()
					y = 50
				} else if (lineStart.y > lineEnd.y && lineStart.x > lineEnd.x) {
					console.log('tl')
					y = 50
					// irregularShape = [...this.irregularShape].reverse()
				} else if (lineStart.y < lineEnd.y && lineStart.x < lineEnd.x) {
					console.log('br')
					y = -20
				} else if (lineStart.y < lineEnd.y && lineStart.x > lineEnd.x) {
					console.log('bl')
					y = -20
				}
				if (lineStart.x < lineEnd.x) {
					this.direction = 'right'
				} else {
					this.direction = 'left'
				}

				// 寻找不规则区域与线的交点
				const intersectionPoint = findIntersection(irregularShape, lineStart, lineEnd);
				const res = intersectionPoint.sort((a, b) => a.distance - b.distance)
				console.log('Intersection Points:', res, y);
				if (intersectionPoint[0]) {
					this.people = {
						x: rpxToPx(intersectionPoint[0].x),
						y: rpxToPx(intersectionPoint[0].y + 530 + y)
					}
					setTimeout(() => {
						this.fall = true
						this.tipShow = true
					}, 2000)

				} else {
					this.people = lineEndStr
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content {
		background-color: rgba(0, 0, 0, 0)!important;
	}
	.tips {
		width: 500rpx;
		background-color: #fff;
		padding: 30rpx;
		
		.icon {
			text-align: center;
			margin-top: -80rpx;
		}

		.tips_title {
			text-align: center;
			
		}

		.tips_content {
			color: #909090;
		}


	}

	.irregularDiv {
		width: 200px;
		height: 200px;
		background-color: lightblue;
		position: relative;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.title {
		font-size: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 30rpx;
	}

	.bg {
		height: 80vh;
		background-size: 100%;
		position: relative;
		background-repeat: no-repeat;

	}

	.area01 {
		width: 100%;
		position: absolute;
		top: 530rpx;
		left: 0;
		bottom: 0;
		z-index: 99;
		// transform:rotate(-55deg)
				// background-color: rgba(0, 0, 0, 0.2);
		clip-path: polygon(320rpx 0,
				100% 250rpx,
				100% 100%,
				0% 100%,
				0 200rpx,
				50rpx 180rpx,
				50rpx 280rpx,
				270rpx 400rpx,
				370rpx 330rpx,
				420rpx 360rpx,
				520rpx 300rpx,
				520rpx 240rpx,
				500rpx 190rpx,
				450rpx 200rpx,
				230rpx 50rpx,		 
			);
	}

	.area02 {
		width: 100%;
		position: absolute;
		top: 530rpx;
		left: 0;
		bottom: 0;

		// transform:rotate(-55deg)
		// clip-path: polygon(230rpx 60rpx,
		// 		430rpx 210rpx,
		// 		480rpx 190rpx,
		// 		520rpx 240rpx,
		// 		520rpx 300rpx,

		// 		420rpx 360rpx,
		// 		370rpx 330rpx,

		// 		270rpx 400rpx,
		// 		50rpx 280rpx,
		// 		50rpx 180rpx,
		// 	);
	}

	.people {
		position: fixed;
		// background-color: aqua;
		width: 148rpx;
		height: 210rpx;
		transition-duration: 2s;
		margin-top: -170rpx;
		margin-left: -74rpx;
		align-items: flex-end;

		.right {
			transform: scale(-1, 1);
		}


		&.fall {
			// transition-delay: 0.5s;
			// background-color: red;
		}
	}

	.po {
		position: absolute;
		background-color: aqua;
		width: 10px;
		height: 10px;
	}
</style>